<template>
	<div class="aside" :style="changewidth">
		<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#333" text-color="#fff"
		 active-text-color="#ffd04b" :collapse="isCollapse" :style="changewidth" :collapse-transition="false">
			<home-left :navMenus="slideMenus" />
		</el-menu>
	</div>
</template>

<script>
	import HomeLeft from './HomeLeft.vue'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				isCollapse: false,
			}
		},
		components: {
			HomeLeft
		},
		mounted() {
			this.$bus.$on('collapseaside', (isCollapseq) => {
				this.isCollapse = isCollapseq
			})
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		computed: {
			...mapState(['user','slideMenus']),
			changewidth() {
				return this.isCollapse ? 'width:52px' : 'width:200px'
			}
		}
	}
</script>
<style lang="less" scoped>
	.el-menu {
		position: absolute;
		top: 60px;
		bottom: 0;
		left: 0;
	}

	/* .el-menu-item i{
	color:#fff;
} */
</style>
